<!--
 * @Author: your name
 * @Date: 2021-12-27 23:48:14
 * @LastEditTime: 2021-12-31 20:36:20
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \Sxun\briup-wisdom-order\src\views\Mine\mine.vue
-->
<template>
  <div class="my">
    <van-sticky>
      <van-nav-bar class="title" style="
          background-color: #409eff;
          border-bottom-right-radius: 5px;
          height: 40px;
        ">
        <template #title>
          <div style="color:white">我的订单</div>
        </template>
      </van-nav-bar>
    </van-sticky>

    <div class="toux">
      <img :src="userInfo.userFace" alt="" />
    </div>
    <div class="ziti">
      <span>{{ userInfo.realname }}</span>
    </div>
    <div class="flex">
      <div class="moneyicon">
        <van-icon class="Micon" name="gold-coin-o" />
      </div>
      <div class="flex_item">
        <p>账户余额</p>
        <p>{{ userInfo.balance }}</p>
      </div>
      <div class="flex_item1">
        <van-button color="#409eff" class="van-btn" round type="info" @click="toRecharge">充值</van-button>
      </div>
    </div>
    <van-cell class="address1" is-link title="我的地址" @click="toProductPage()" />
    <router-view></router-view>
    <div class="box1">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="手机号" name="1">{{
          userInfo.telephone
        }}</van-collapse-item>
        <van-collapse-item title="消费记录" name="2">
          <span @click="searchComsumeDatail(userInfo.id)">详情</span>
          <van-action-sheet v-model="show" title="消费记录">
            <div class="content">
              <div v-for="item in comsume" :key="item.id">
                交易时间：{{ item.transferTime }}<br />
                交易金额：{{ item.transferMoney }}<br />
                交易类型：{{ item.type }}<br />
                交易状态：{{ item.status }}<br />
                <van-divider :style="{
                    color: '#1989fa',
                    borderColor: '#1989fa',
                    padding: '0 16px',
                  }">
                </van-divider>
              </div>
            </div>
          </van-action-sheet>
        </van-collapse-item>
      </van-collapse>
    </div>
    <van-action-sheet v-model="balanceShow" title="充值" @close="toClose">
      <van-form validate-first @submit="topUp">
        <!-- 通过 validator 进行函数校验 -->
        <van-field v-model="balance" name="validator" label="充值金额" placeholder="请输入充值金额"
          :rules="[{ validator, message: '单次充值金额不超过1000元' }]" />
        <div style="margin: 16px">
          <van-button color="#409eff" round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-action-sheet>
    <div class="exit" style="margin: 16px; margin-top: 40%">
      <van-button color="#409eff" round block type="info" native-type="submit" @click="logout">
        退出登录
      </van-button>
    </div>

  </div>
</template>

<script>
  import {
    mapActions,
    mapState,
    mapMutations
  } from "vuex";
  // 调用弹框
  import {
    Dialog
  } from "vant";
  import {
    Collapse,
    CollapseItem
  } from "vant";
  export default {
    data() {
      return {
        show: false,
        curUserId: "",
        activeNames: [],
        active: "",
        page: 1,
        pageSize: 10,
        // 充值框弹出
        balanceShow: false,
        // 充值金额
        balance: "",
      };
    },
    created() {
      this.getUserInfo();
      // this.getComsumeData();
    },
    methods: {
      consumeButton() {},
      toProductPage() {
        this.$router.push({
          path: "/manager/address",
          // query: {
          //   userId: id,
          // },
        });
      },
      searchComsumeDatail(id) {
        this.show = true;
      //  console.log(id);
        this.curUserId = id;
        this.getComsumeData();
      },
      ...mapActions("address", ["getAddressVuex", "getComsume"]),
      ...mapMutations(["delToken"]),
      ...mapActions("user", ["getUserInfo"]),
      ...mapActions("user", ["getRecharge"]),
      getComsumeData() {
        let params = {
          page: 1,
          pageSize: 50,
          userId: this.curUserId,
        };
        this.getComsume(params);
      },
      // 充值
      topUp() {
       // console.log(this.balance, this.userInfo.id);
        let data = {
          customerId: this.userInfo.id,
          money: this.balance,
        };
        this.getRecharge(data).then((r) => {
         // console.log(r);
          if (r.data.status == 200) {
            this.$notify({
              type: "success",
              message: r.data.message,
            });
            this.getUserInfo();
            this.balanceShow = false;
          } else {
            this.$notify({
              type: "danger",
              message: r.data.message,
            });
            this.getUserInfo();
          }
        });
        // 实现充值逻辑
      },
      validator(val) {
        if (val < 0 || val > 1000) {
          return false;
        } else {
          return true;
        }
      },
      // 取消弹框
      toClose() {
        // 余额置空
        this.balance = "";
      },
      toRecharge() {
        this.balanceShow = true;
      },
      logout() {
        Dialog.confirm({
            confirmButtonColor: '#7879FF',
            message: "是否退出登录？",
          })
          .then(() => {
            // on confirm
            this.delToken({
              token: ""
            });
            this.$router.push("/login");
          })
          .catch(() => {
            // on cancel
          });
      },
    },
    computed: {
      ...mapState("address", ["comsume", "addressData"]),
      ...mapState("user", ["userInfo"]),
    },
  };
</script>

<style scoped>
  .van-icon-gold-coin-o::before {
    color: #409eff;
  }

  .my {
    width: 100%;
    height: 800px;
    /* background: linear-gradient(to bottom,rgb(101, 103, 230) 5%,rgb(255, 255, 255) 90%) */
    /* background-image: radial-gradient(at center top,rgb(101, 103, 230) 5%,rgb(255, 255, 255) 90%); */
    /* background-image: radial-gradient(circle at center top,rgb(101, 103, 230) 10%,rgb(255, 255, 255) 90%); */
    position: fixed;
    /* background-color: rgba(238, 238, 238, 0.959); */
    /* background: url(../Mine/img/Gt.jpg) no-repeat;
  background-size: 100% 12%; */
  }

  .flex {
    width: 95%;
    height: 100px;
    margin: 0 auto;
    background-color: rgb(233, 233, 233);
    border-radius: 20px;

    /* box-shadow: 0 0 6px 0 #ccc; */

    /* border: 1px solid red ; */
  }

  .flex_item {
    float: left;
  }

  .flex_item p {
    /* border: 1px solid red ; */
    /* margin-left: 100px; */
    margin-top: 20px;
    text-align: center;
  }

  .flex_item1 {
    /* border: 1px solid red ; */
    float: left;
    margin-left: 90px;
    margin-top: 25px;
  }

  .moneyicon {
    float: left;
    width: 100px;
    height: 100px;
    /* border: 1px solid red ; */
  }

  .Micon {
    font-size: 50px;
    margin-left: 50px;
    margin-top: 25px;
  }

  .van-action-sheet__content {
    height: 180px;
  }

  .toux {
    /* margin-left: 50%; */

    width: 100px;
    height: 100px;
    border-radius: 100px;
    margin: 0 auto;
    border: 1px solid rgb(255, 255, 255);
    overflow: hidden;
    margin-top: 30px;
    border: 3px solid rgb(240, 240, 240);
  }

  .toux img {
    width: 100%;
    transition: all 1s;
  }

  .toux img:hover {
    transform: scale(1.2);
  }

  .address1 {
    margin: 0 auto;
    width: 95%;
    box-shadow: 0 0 6px 0 #ccc;
    border-radius: 20px;
    margin-top: 10px;
  }

  .ziti {
    /* color: aliceblue; */
    margin-top: 10px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    /* border: 1px solid red; */
    margin-top: 10px;
  }

  .box1 {
    position: absolute;
    width: 100%;
    /* height: 300px; */
    /* border: 1px solid red; */
    background: rgba(238, 238, 238, 0.3);
    margin: 0 auto;
    margin-top: 20px;
  }

  .van-cell {
    background: rgba(238, 238, 238, 0.3);
    /* color: aliceblue; */
  }

  /* .comsume{
  width: 300px;
  height: 700px;
  border: 1px solid rgb(21, 25, 235);
} */
  .content {
    padding: 16px 16px 30px;
    /* border: 1px solid red; */
  }

  .footer {
    height: 400px;
  }
</style>